<template>
	<view class="apply">
		<view class='nav acea-row row-around'>
			<view class='item' :class='orderStatus==0 ? "on": ""' @click="statusClick(0)">
				<view >角色变更</view>
			</view>
			<view class='item' :class='orderStatus==1 ? "on": ""' @click="statusClick(1)">
				申请入班
			</view>
		</view>
		<view class="block_item" v-for="(item,index) in list" :key="index">
			<view class="list-item apply_item border_line">
				<view class="left_info">昵称</view>
				<view class="right_info">{{item.nickname}}</view>
			</view>
			<view class="list-item apply_item border_line">
				<view class="left_info">手机号</view>
				<view class="right_info">{{item.phone}}</view>
			</view>
			<view class="list-item apply_item border_line">
				<view class="left_info">审核状态</view>
				<view class="right_info" v-if="item.status == 0">审核中</view>
				<view class="right_info" v-else-if="item.status == 1">已同意</view>
				<view class="right_info" v-else-if="item.status == 2">已拒绝</view>
			</view>
			<view class="list-item apply_item border_line">
				<view class="left_info">变更信息</view>
				<view class="right_info">{{item.remark}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getEvaInfoList
	} from '@/api/user'
	export default {
		data() {
			return {
				orderStatus: 0,
				list: [],
				info: []
			};
		},

		onLoad() {
			this.statusClick(0)
		},

		methods: {
			statusClick(key) {
				this.getSublist(key);
				this.orderStatus = key;
			},
			getSublist(roleType) {
				this.m_show("加载中");
				getEvaInfoList({
					roleType
				}).then(res => {
					this.list = res.data;
					this.m_hide();

					let info = ["昵称", "手机号", "变更内容"];
					this.info = res.data.map(item => {
						let value = "";
						if (item == '昵称') {
							value = userInfo.phone;
						} else if (item == '手机号') {
							value = userInfo.phone;
						} else if (item == '职位') {
							value = userInfo.roleName;
						} else if (item == '营地') {
							value = userInfo.place;
						} else if (item == '校区') {
							value = userInfo.school;
						}
						return {
							label: item,
							value
						}
					})

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		background-color: #fff;
		border-radius: 14rpx;
		margin: 0 auto;

		.item {
			text-align: center;
			font-size: 26rpx;
			color: #282828;
			padding: 26rpx 0;
		}
		.on {
			font-weight: bold;
			position: relative;
			&:after {
				content: '';
				height: 6rpx;
				background-color: #007E51;
				position: absolute;
				bottom: 2rpx;
				left: 0;
				right: 0
			}
		}
	}

	.block_item {
		margin: 20rpx 0;
	}

	.list-item {
		background-color: #fff;
		position: relative;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
	}
</style>